/**
 * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
 */
@use 'sass:math';
@use './color.scss' as *;
@use 'sass:map';

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 14px;
    line-height: 22px;
    position: relative;
    font-family: 'Source Han Sans CN';
}

::-webkit-scrollbar {
    width: 0;
    height: 20px;
}

.el-pagination.is-background {
    .el-pager li:not(.is-disabled) {
        border: 1px solid $og-sub-border-color !important;

        &.is-active {
            color: $og-sub-primary-color !important;
            border-color: $og-sub-primary-color !important;
        }

        &:hover {
            border-color: $og-sub-primary-color !important;
        }
    }

    &.el-pagination--small .el-pager li {
        min-width: 32px !important;
    }
}

.el-overlay,
.el-message,
.el-popper {
    z-index: 10000000 !important;
}

.el-dialog {
    .el-dialog__header {
        border-bottom: 1px solid $og-sub-border-color !important;
        margin-right: 0px !important;
        padding-top: 10px !important;
        font-size: 14px !important;
    }

    .el-dialog__title {
        font-size: 14px !important;
    }

    .el-dialog__headerbtn {
        top: -2px !important;
    }

    .el-dialog__footer {
        border-top: 1px solid $og-sub-border-color !important;
        padding-bottom: 10px !important;
    }
}

.el-menu-item.is-active {
    background-color: var(--el-bg-color-og-hover) !important;
    border-right: 2px solid $og-primary-color !important;
    color: var(--el-text-og-regular);
}

.el-menu--collapse .el-sub-menu__title {

    span,
    .el-sub-menu__icon-arrow {
        display: none !important;
    }
}

.el-popper:focus {
    outline: none !important;
}

#app {
    height: 100%;
    --vem-header-height: 30px;
    --og-sub-text-color: #{$og-sub-text-color};
    color: var(--el-text-color-regular);
}

:root {
    --el-bg-color-overlay: $og-background-color;
    --el-color-primary: $og-primary-color;
    --el-text-color-primary: var(--el-text-color-og);

    @for $i from 1 through 9 {
        --el-color-primary-light-#{$i}: #{mix(#fff, #732fcb, math.percentage(math.div($i, 10)))};
    }
}

.el-picker-panel .el-button {
    background-color: var(--el-bg-color-sub) !important;
    border-color: $og-button-active-color !important;
    color: var(--el-table-cell) !important;
}

.el-button {
    height: auto !important;

    &:active {
        background-color: $og-button-active-color !important;
        border-color: $og-button-active-color !important;
    }

    &.is-text:not(.is-disabled).is-has-bg {
        background-color: transparent !important;
        padding: 0 !important;
    }
}

.el-picker-panel__link-btn {
    color: var(--el-button-text-color) !important;
}

.el-button.is-text {
    color: var(--el-button-text-color) !important;
}

.el-tabs__header {
    background-color: var(--el-bg-color-sub-white) !important;
    margin: 0 !important;
}

.el-tabs__item {
    padding: 0 16px !important;
    font-size: 14px !important;
    color: var(--el-text-color-og) !important;
}

.el-tabs__active-bar {
    background-color: var(--primary-6) !important;
    height: 3px !important;
}

.is-active {
    color: var(--primary-6) !important;
}

.el-input__inner {
    color: var(--el-text-color-og) !important;
}

.el-progress {
    &-bar__inner {
        background-color: $og-sub-primary-color !important;
    }
}

.el-range-editor.is-disabled {
    border-color: $og-border-color !important;
    background-color: var(--el-bg-color-disabled) !important;
}

.el-range-editor.is-disabled input {
    background-color: var(--el-bg-color-disabled) !important;
}

.el-loading-spinner .el-loading-text {
    color: $og-sub-primary-color !important;
}

.el-loading-spinner .path {
    stroke: $og-sub-primary-color !important;
}

.el-button--small {
    border: none !important;
    color: var(--el-text-color-og);
}

.sql-popover-tip {
    max-width: 300px !important;
    color: var(--el-text-color-og) !important;
}

.el-picker-panel__icon-btn .el-icon {
    color: var(--el-text-color-og);
}

.in-active-path .el-cascader-node__label {
    color: var(--el-color-tabbar-active) !important;
}

.el-cascader .el-input.is-focus {
    border: none !important;
}

.el-cascader .el-input.is-focus .el-input__wrapper {
    border: none !important;
    box-shadow: 0 0 0 1px var(--hw-primary-1, var(--hw-primary-1)) inset !important;
}

.el-select-dropdown__item.selected {
    color: var(--el-color-tabbar-active) !important;
}

.el-cascader-panel .in-active-path .el-icon svg {
    color: var(--hw-primary-1);
}

// textarea
.el-textarea.is-disabled .el-textarea__inner {
    background-color: var(--el-bg-color-disabled) !important;
}

.el-textarea__inner:focus {
    background-color: var(--main-background-color) !important;
}

.el-table .cell {
    color: var(--color-1) !important;

    .el-button.el-button--primary {
        color: var(--primary-6) !important;
        border: none !important;
        background-color: var(--button-1-background) !important;
    }
}

.el-input__wrapper.is-active {
    background-color: var(--main-background-color) !important;
}

.el-input__wrapper.is-active .el-range-input {
    background-color: var(--main-background-color) !important;
}

// pagination
.el-pagination {
    margin: 5px;
    display: flex;
    justify-content: flex-end;
}

.el-pagination.is-background .el-pager li:not(.is-disabled) {
    border: 0 !important;
    background-color: rgb(255, 255, 255, 0);
}

.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
    color: var(--primary-6) !important;
    background-color: var(--color-primary-light-1) !important;
}

.btn-prev {
    background-color: rgb(255, 255, 255, 0) !important;
}

.btn-next {
    background-color: rgb(255, 255, 255, 0) !important;
}

// el-link
.el-link {
    font-size: 12px !important;
}

// table
.table-wrapper-table-id {
    color: var(--primary-6) !important;
    cursor: pointer;
}


// button for message box
.el-message-box__btns .el-button.el-button--primary {
    color: var(--color-bg-2) !important;
    background-color: var(--primary-6) !important;
}

.el-message-box__btns .el-button.el-button--primary.search-button {
    color: var(--primary-6) !important;
    background-color: rgb(255, 255, 255, 0) !important;
    border: 1px solid var(--primary-6) !important;
}

// Element Button Reset
.el-button {
    font-size: 14px !important;
    border: 1px solid var(--button-1-border) !important;
    border-radius: 2px;
    font-weight: 400 !important;
    color: var(--button-1-color) !important;
    background-color: var(--button-1-background) !important;
}

.el-button.el-button--primary {
    color: var(--color-bg-2) !important;
    background-color: var(--primary-6) !important;
}

.el-button.el-button--primary.search-button {
    color: var(--primary-6) !important;
    background-color: rgb(255, 255, 255, 0) !important;
    border: 1px solid var(--primary-6) !important;
}

.el-form-item--default {
    margin-bottom: 15px !important;
}
.el-checkbox__label {
    padding-left: 4px !important;
}